<template>
  <div class="public-header">
    <i class="public-header-icon icon1" @click="toggleSideBar"></i>
    <h3>
      <img :src="allcontact.sheetPrint?allcontact.sheetPrint:'../assets/img/public-logo.png'" alt="" class="public-logo">
    </h3>
    <!-- <i class="public-header-icon icon2" v-show="!loginStatus" @click="toggleSubSideBar"></i> -->
    <i class="public-header-icon icon2" v-show="!loginStatus" @click="goLoginPage"></i>
    <i class="public-header-icon icon3" v-show="loginStatus" @click='outLogin'></i>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex';
  import { Form, Func, Auth, SideBar } from '@/providers';
  import { UserInfo } from '@/services';

  export default {
    name: 'TopHeader',
    data() {
      return {
        list: []
      };
    },
    computed: {
      ...mapGetters([
        'loginStatus',
        'sidebar',
        'allcontact'
      ])
    },
    methods: {
      toggleSideBar() {
        this.$store.dispatch('TOGGLESIBAR');
      },
      toggleSubSideBar() {
        this.$store.dispatch('TOGGLESIBAR');
        this.$store.dispatch('SIDEBARINDEX', { index: 20, type: 'index' });
        let time = setTimeout(() => {
          this.$store.dispatch('SUBARRDATA', this.list[6].sub);
          clearTimeout(time);
        }, 600);
      },
      // 退出登录
      outLogin() {
        // 双语切换
        this.$dialog.Confirm({
          title: this.$t('WARMTIPS'),
          msg: this.$t('OUTLOGIN_TIP'),
          onOk: async() => {
            try {
              let res = await UserInfo.Logout({ token: Auth.getItem('token') });
              this.$dialog.toast({
                msg: res.desc,
                position: 'top',
                onOk: () => {
                  window.sessionStorage.clear();
                  this.$store.dispatch('LOGINSTATUS', Auth.checkItem('token'));
                }
              });
            } catch (error) {
              console.log(error);
            }
          }
        });
      },
      // 跳转登录
      goLoginPage() {
        if (this.sidebar) {
          this.toggleSideBar();
        }
        this.$router.push('/login');
      }
    },
    created() {
      SideBar.getData().then((res) => {
        this.list = res;
      });
    }
  };
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  @import "../assets/sass/TopHeader";
</style>